<template>
	<view class="top_title">
		<view class="title" :style="{background:styles.bgColor?styles.bgColor:'#11c87c',color:styles.color}">
			<view class="back" v-if="styles.back" @click="back">
				<uni-icons type="back" size="32" :color="styles.color"></uni-icons>
			</view>
			<view class="">{{styles.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			styles:{
				type:Object,
				default:{}
			}
		},
		name:"topTitle",
		data() {
			return {
				
			};
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.top_title{
		width: 100%;
		.title{
			width: 100%;
			height: 84px;
			padding-bottom: 5px;
			box-sizing: border-box;
			font-size: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			position: relative;
			.back{
				position: absolute;
				bottom: 0;
				left: 8px;
			}
		}
	}
</style>